<template>
  <el-card class="box-card el-card-flex" style="overflow: visible;">
    <div class="el-flex el-over-auto" style="padding: 0 20px;">
      <h1 class="size-20 font-bold align-center" style="margin-top:20px;margin-bottom: 10px;">2019年“最美同事，爱我中煤”摄影比赛作品网络投票</h1>
      <h2 class="size-12 color-gray align-center" style="margin-bottom: 10px;"><i class="el-icon-time"></i>
        投票时间：2019年9月2日~2019年9月30日
        <!-- <i class="el-icon-view" style="margin-left: 30px;"></i> 投票人次：2048 -->
      </h2>
      <p class="size-14 line-25" style="margin-bottom: 10px;">在信息公司举办的“最美同事，爱我中煤”摄影比赛中，涌现出的优秀作品可谓琳琅满目，群星璀璨。每一幅照片都有着它别样的意义，我们的摄影爱好者用他们的镜头和独特的视角，细腻、传神地展现了身边美好的事物和风景，记录了企业员工的工作风貌，真是美轮美奂，精彩纷呈。终于到了激动人心而又艰难抉择的评选环节，我们将在{{picList.length}}幅入围作品中产生3个最耀眼的“人气明星”。欢迎大家踊跃参与，现在，点击鼠标投票选出您心目中的最佳作品吧~</p>
      <p class="size-14 line-25" style="margin-bottom: 20px;">
        <span class="color-red">友情提示:</span>
        点击图片可查看原图，由于网站限制，每幅（组）照片已压缩至1M以内，但不会影响浏览图片质量哦”，欢迎点击欣赏O(∩_∩)O~最多只能选投10个哦~ </p>
      <el-row :gutter="20">
        <el-col :span="colspan" v-for="(list, index) in newPicList" :key="'col'+index" :id="'el-col-img-'+index">
          <el-card class="el-card-pic" v-for="(list2, index2) in list" :key="'src'+index2">
            <el-image lazy :src="'/static/img/works/photo_se/'+list2.photoPath" :preview-src-list="['/static/img/works/photo_plus/'+list2.photoPathPlus]"
              @load="photoCommon.photoLoadEvt(newPicList,clonePiclist)" @error="photoCommon.photoLoadEvt(newPicList,clonePiclist)">
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
              <div slot="placeholder" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="el-pic-title">
              <h1 class="el-pic-h1"><span class="size-16">NO.{{list2.photoCode}}</span><br><span class="color-blue">{{list2.count?Number(list2.count):0}}</span>
                <span class="color-gray">票</span></h1>
              <el-button v-if="submitFlag == 'N' && list2.currentUserVoted=='N'" type="primary" size="mini" @click="voteEvt(list2)">投票</el-button>
              <el-button v-else-if="submitFlag == 'N' && list2.currentUserVoted=='Y'" type="info" size="mini" @click="cancelVoteEvt(list2)">取消</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
  import './styles/photograph.scss'; //公用样式
  import photoCommon from "./js/photoCommon.js"; //公用方法
  import {
    image,
    MessageBox,
    Message
  } from 'element-ui';
  export default {
    components: {
      'el-image': image, //图片插件
    },
    data() {
      return {
        totalCont: 99,
        colspan: 6,
        newPicList: [], //瀑布流数据源
        picList: [], //数据源
        clonePiclist: [],
        submitFlag: "N", //是否提交
        photoCommon: photoCommon
      }
    },
    methods: {
      /*可投票的摄影作品列表查询*/
      getPhotos() {
        let sendDatas = {
          value: {
            topicalId: "最美同事，爱我中煤"
          },
          page: 1,
          size: 10000
        };
        this.axios.post('/photo/photos', sendDatas).then(res => {
          if (res.data.code != 10000) return;
          this.picList = res.data.data.records;
          this.submitFlag = res.data.data.submitFlag; //提交开关
          this.renderPicFull(); //渲染图片瀑布流
        });
      },
      /* 点击投票事件*/
      voteEvt(data) {
        this.axios.post('/photo/vote', data).then(res => {
          if (res.data.code == 10002) {//自定义提示
            document.getElementsByClassName("el-message")[0].remove(); //移除默认的提示
            Message.warning("最多可投10票，您已超出投票上限了哦");
          }
          if (res.data.code != 10000) return;
          data.currentUserVoted = "Y";
          data.count = Number(data.count) + 1;
          Message.success("投票成功"); //成功提示
        });
      },
      /* 取消投票事件*/
      cancelVoteEvt(data) {
        MessageBox.confirm('您确定要取消投票吗?').then(() => {
          this.axios.post('/photo/cancel', data).then(res => {
            if (res.data.code != 10000) return;
            data.currentUserVoted = "N";
            data.count -= 1;
            Message.success("取消投票成功"); //成功提示
          });
        });
      },
      /* 渲染图片瀑布流*/
      renderPicFull() {
        this.clonePiclist = JSON.parse(JSON.stringify(this.picList));
        this.newPicList = photoCommon.countFullCols(this.picList);; //计算瀑布流列数
        this.colspan = 24 / this.newPicList.length;
        this.newPicList[0].push(this.clonePiclist[0]);
        this.clonePiclist.splice(0, 1)
      }
    },
    created() {
      window.onresize = () => {
        setTimeout(() => {
          this.renderPicFull(); //计算瀑布流
          let myVar = setInterval(() => {
            if (this.clonePiclist.length > 0) {
              photoCommon.photoLoadEvt(this.newPicList, this.clonePiclist); //按顺序渲染图片
            } else {
              clearInterval(myVar);
            }
          }, 5);
        }, 0)
      }
      this.getPhotos(); //获取作品列表
      photoCommon.imgMaskClose(); //图片放大器,点击遮罩空白处关闭
    }
  }
</script>
